<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        const myAxios = axios.create({
            baseURL: "http://gmall-h5-api.atguigu.cn/",
            timeout: 9999,
        })

        /* 
            请求拦截器的失败函数进入条件
                1.条件1
                -首先设置请求拦截器use方法的第三个参数option对象的synchronous属性为true(打开同步)
                -当请求拦截器的成功回调中,如果出现异常被抛出,则直接进入失败的回调函数

                2.条件2
                -假设有两个请求拦截器,分别是 拦截器1 和 拦截器2 ,拦截器1先执行,拦截器2后执行
                -如果拦截器1中的成功函数返回了失败的promise实例,则拦截器2的失败的回调函数会执行
                -总结:2的失败回调函数就是为了处理1的成功回调函数中抛出的失败
        */

        myAxios.interceptors.request.use(
            (config) => {
                console.log('第一个请求拦截器成功函数的config打印', config);

                return config
            }, (error) => {
                console.log('第一个请求拦截器失败函数的error打印', error);
                return Promise.reject('第一个请求拦截器错误')
            })


        myAxios.interceptors.request.use(
            (config) => {
                console.log('第二个请求拦截器成功函数的config打印', config);

                return Promise.reject('第二个拦截器成功函数返回失败的promise实例')
            }, (error) => {
                console.log('第二个请求拦截器失败函数的error打印', error);
                return Promise.reject('第二个请求拦截器错误')
            })


        /* 
          响应拦截器的失败函数进入条件:
            -请求已经发送到服务器,但是在服务器没有得到预想的结果
            -比如:超时 服务器宕机(5xx) 找不到数据(4xx) 等等
        
        */

        myAxios.interceptors.response.use(
            (response) => {
                console.log('第一个响应拦截器成功函数的response打印', response);
                return response
            },
            (error) => {
                console.log('第一个响应拦截器失败函数的error打印', error);
                return Promise.reject('第一个响应拦截器错误')
            })

        const oBtn = document.getElementById('btn')

        btn.onclick = async function () {
            try {
                const result = await myAxios.get("/api/product/getBaseCategoryList")
                console.log(result, 'result');
            } catch (e) {
                console.log('在异常处理中的错误信息打印', e);
            }
        }
    </script>
</body>

</html>